<template>
  <div class="app-container">
    <!--顶部搜索栏-->
    <el-row>
      <el-col :span="24" class="card-box">
          <el-form ref="queryForm" :model="queryParams" size="small" :inline="true">
            <el-form-item>
              <el-select v-model="queryParams.timeType" @change="handleTimeTypeSelect" placeholder="请选择">
                <el-option
                  v-for="item in timeSelect"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="timeRange"
                type="daterange"
                range-separator="至"
                @change="handleQuery"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
      </el-col>
    </el-row>
    <!--第一列，企业排行，检测折线图-->
    <el-row>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header" style="font-weight: bold"><span>企业检测数量排行</span></div>
          <el-table
            v-loading="checkCompanyRankListLoading"
            :data="checkCompanyRankList"
            style="width: 100%;height: 300px">
            <el-table-column
              prop="companyName"
              label="企业名称"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="count"
              label="检测数量"
              align="center"
            >
            </el-table-column>

            <el-table-column
              prop="outCount"
              label="阳性数量"
              align="center"
            >
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header" style="font-weight: bold"><span>企业检测</span></div>
          <check-company-bar v-loading="checkCompanyRankListLoading" :checkCompanyRankList="checkCompanyRankList"/>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header" style="font-weight: bold"><span>问题产品排行</span></div>
          <el-table
            v-loading="checkGoodsRankListLoading"
            :data="checkGoodsRankList"
            style="width: 100%;height: 300px">
            <el-table-column
              prop="goodsName"
              label="企业名称"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="ancestorsName"
              label="分类"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="count"
              label="检测数量"
              align="center"
            >
            </el-table-column>

            <el-table-column
              prop="outCount"
              label="阳性数量"
              align="center"
            >
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header" style="font-weight: bold"><span>商品检测占比</span></div>
          <check-goods-pie v-loading="checkGoodsRankListLoading" :checkGoodsRankList="checkGoodsRankList"/>
        </el-card>
      </el-col>
    </el-row>

<!--    <el-row>-->
<!--      <el-col :span="12" class="card-box">-->
<!--        <el-card>-->
<!--          <div slot="header" style="font-weight: bold"><span>不合格产品排行</span></div>-->
<!--          <BarChart :option="checkRankList"/>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--      <el-col :span="12" class="card-box">-->
<!--        <el-card>-->
<!--          <div slot="header" style="font-weight: bold"><span>不合格检测项目排行</span></div>-->
<!--          <PieChart :option="optionRing"/>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--    </el-row>-->
  </div>
</template>

<script>
import BarChart from "@/views/dashboard/BarChart";
import PieChart from "@/views/dashboard/PieChart";
import {checkCompanyRank, checkGoodsRank} from "@/api/dashboard/dashboard";
import LineChart from "@/views/dashboard/LineChart";
import CheckLine from "@/views/dashboard/checkLine";
import CheckCompanyBar from "@/views/dashboard/1/checkCompanyBar";
import CheckGoodsPie from "@/views/dashboard/1/checkGoodsPie";
export default {
  name: "Index",
  components: {CheckGoodsPie, CheckCompanyBar, CheckLine, LineChart, PieChart, BarChart},
  data() {
    return {
      // 版本号
      version: "3.8.8",
      //默认time类型为周
      timeRange: [],
      queryParams: {
        timeType: "week",
      },
      timeSelect: [
        {
          value: 'day',
          label: '今天'
        },
        {
          value: 'week',
          label: '本周'
        },
        {
          value: 'month',
          label: '本月'
        },
        {
          value: 'halfYear',
          label: '最近半年'
        },
        {
          value: 'year',
          label: '本年'
        }
      ],
      checkBarList: [],
      checkItemPieList: [],
      checkCompanyRankListLoading: false,
      checkCompanyRankList: [],
      checkGoodsRankListLoading: false,
      checkGoodsRankList: []
    }
  },
  methods: {
    handleQuery(){
      this.getCheckCompanyRank()
      this.getCheckGoodsRank()
    },
    resetQuery(){},
    getCheckCompanyRank(){
      this.checkCompanyRankListLoading = true
      checkCompanyRank(this.buildQueryTime(this.queryParams,this.timeRange)).then(res => {
        this.checkCompanyRankList = res.data;
        this.checkCompanyRankListLoading = false
      })
    },
    getCheckGoodsRank(){
      this.checkGoodsRankListLoading = true
      checkGoodsRank(this.buildQueryTime(this.queryParams,this.timeRange)).then(res => {
        this.checkGoodsRankList = res.data;
        this.checkGoodsRankListLoading = false
      })
    },
    handleTimeTypeSelect(){
      if (this.queryParams.timeType === 'day'){
        this.timeRange = this.getDay();
      }
      if (this.queryParams.timeType === 'week'){
        this.timeRange = this.getWeek();
      }
      if (this.queryParams.timeType === 'month'){
        this.timeRange = this.getMonth();
      }
      if (this.queryParams.timeType === 'halfYear'){
        this.timeRange = this.getHalfYear();
      }
      if (this.queryParams.timeType === 'year'){
        this.timeRange = this.getYear();
      }
      this.handleQuery()
    },
    getDay(){
      let timeRange = [];
      let date = new Date();
      timeRange[0] = this.formatDate(date)
      timeRange[1] = this.formatDate(date)
      return timeRange;
    },
    getWeek(){
      let timeRange = [];
      let now = new Date();
      let dayOfWeek = now.getDay();
      let numDay = now.getDate();

      let start = new Date(now); //clone date
      start.setDate(numDay - ((dayOfWeek === 0 ? 7 : dayOfWeek) - 1));
      start.setHours(0, 0, 0, 0);

      let end = new Date(now); //clone date
      end.setDate(numDay + (7 - (dayOfWeek === 0 ? 7 : dayOfWeek)));
      end.setHours(23, 59, 59, 999);

      timeRange[0] = this.formatDate(start);
      timeRange[1] = this.formatDate(end);
      return timeRange;
    },
    getMonth(){
      let timeRange = [];
      let now = new Date();
      let start = new Date(now.getFullYear(), now.getMonth(), 1);
      let end = new Date(now.getFullYear(), now.getMonth() + 1, 0);

      timeRange[0] = this.formatDate(start);
      timeRange[1] = this.formatDate(end);
      return timeRange;
    },
    getHalfYear(){
      let timeRange = [];
      let now = new Date();
      let start, end;

      if (now.getMonth() < 6) {
        start = new Date(now.getFullYear(), 0, 1);
        end = new Date(now.getFullYear(), 5, 30);
      } else {
        start = new Date(now.getFullYear(), 6, 1);
        end = new Date(now.getFullYear(), 11, 31);
      }
      timeRange[0] = this.formatDate(start);
      timeRange[1] = this.formatDate(end);
      return timeRange;
    },
    getYear(){
      let timeRange = [];
      let now = new Date();
      let start = new Date(now.getFullYear(), 0, 1); // First day of the year
      let end = new Date(now.getFullYear(), 11, 31); // Last day of the year

      timeRange[0] = this.formatDate(start);
      timeRange[1] = this.formatDate(end);
      return timeRange;
    },
    formatDate(dateObj) {
      let year = dateObj.getFullYear();
      let month = dateObj.getMonth() + 1; // getMonth() is zero-based
      let day = dateObj.getDate();
      month = month < 10 ? '0' + month : month;
      day = day < 10 ? '0' + day : day;
      return `${year}-${month}-${day}`;
    }
  },
  mounted() {
    this.handleTimeTypeSelect()
    this.handleQuery()
  }
};
</script>
